<template>
    <van-nav-bar title="我的代金券" left-text="返回" left-arrow @click-left="onClickLeft" />

    <van-tabs>
        <van-tab title="未使用">
            <ul>
                <li v-for="item in nouseList" :key="item.id">
                    <div>
                        <strong>{{ item.type }}</strong>
                        <p>{{ item.name }}</p>
                        <p>适用范围：{{ item.range }}</p>
                        <p>有效期至: {{ item.time }}</p>
                    </div>
                    <button class="touse" @click="touse">去使用</button>
                </li>
            </ul>
        </van-tab>
        <van-tab title="已使用">
            <ul>
                <li v-for="item in useList" :key="item.id">
                    <div>
                        <strong>{{ item.type }}</strong>
                        <p>{{ item.name }}</p>
                        <p>适用范围：{{ item.range }}</p>
                        <p>有效期至: {{ item.time }}</p>
                    </div>
                </li>
            </ul>
        </van-tab>
        <van-tab title="已过期">
            <ul>
                <li v-for="item in expireList" :key="item.id">
                    <div>
                        <strong>{{ item.type }}</strong>
                        <p>{{ item.name }}</p>
                        <p>适用范围：{{ item.range }}</p>
                        <p>有效期至: {{ item.time }}</p>
                    </div>
                </li>
            </ul>
        </van-tab>
    </van-tabs>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue'
import type { Ref } from 'vue'
import { useRouter } from "vue-router"
import { getCoupon } from '@/api/coupon'
onMounted(async () => {
    const { data } = await getCoupon()
})
const router = useRouter()

interface InouseList {
    id: number,
    type: string,
    name: string,
    range: string,
    time: string
}

const nouseList: Ref<InouseList[]> = ref([
    {
        id: 1,
        type: '满减券',
        name: '满300元减30元',
        range: '直播讲座',
        time: '2023.12.31',
    }
])
const useList: Ref<InouseList[]> = ref([
    {
        id: 1,
        type: '无门槛券',
        name: '任何消费直减10元',
        range: '直播讲座',
        time: '2024.2.15',
    }
])
const expireList: Ref<InouseList[]> = ref([
    {
        id: 1,
        type: '折扣券',
        name: '满500打9折',
        range: '直播讲座',
        time: '2024.12.31',
    }
])

function onClickLeft () {
    history.back()  
}

function touse () {
    router.push("/lecture")
}

</script>

<style scoped lang="scss">
ul {
    width: 370px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

li {
    width: 290px;
    height: 110px;
    padding: 20px;
    margin-top: 20px;
    border: 1px solid rgb(25 137 250);
    border-radius: 20px;
    background-color: rgba(240, 168, 74, 0.8);
    position: relative;
}
.touse {
    width: 60px;
    height: 30px;
    position: absolute;
    right: 30px;
    top: 58px;
    border-radius: 5px;
}
</style>